<template>
  <n-spin  class="flex-col flex-1 h-full" :show="loading">
  <n-grid :cols="12" :x-gap="12" :y-gap="12">
    <n-gi :span="4">
      <info-card content="CPU当前总使用率" :detail="cpuDetail" :precent="(cpu?.sys! + cpu?.used!)?Number((cpu?.sys! + cpu?.used!).toFixed(2)):0" title="CPU监控"></info-card>
    </n-gi>
    <n-gi :span="4">
      <info-card content="内存使用率" :detail="memDetail" :precent="mem?.usage" title="内存信息"></info-card>
    </n-gi>
    <n-gi :span="4">
      <info-card content="存储使用率" :detail="sysFileDetail" :precent="sysFileTotal?.usage" title="存储信息"></info-card>
    </n-gi>
    <!-- <n-gi :span="3">
      <info-card :network="true" title="网络信息"></info-card>
    </n-gi> -->
    <n-gi :span="12" v-if="cpu">
      <info-table :column="2" :table="cpuTable" title="CPU监控"></info-table>
    </n-gi>
    <n-gi :span="9" v-if="jvm">
      <info-table :column="2" :table="jvmTable" title="JVM信息"></info-table>
    </n-gi>
    <n-gi :span="3">
      <info-card content="JVM内存使用率" :precent="jvm?.usage" :detail="jvmDetail" title="JVM监控"></info-card>
    </n-gi>
    <n-gi :span="12" v-if="sys">
      <info-table :column="2" :table="sysTable" title="服务器信息"></info-table>
    </n-gi>
  </n-grid>
</n-spin>

</template>
<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import { fetchMonitorInfo } from "@/service/api/monitor/monitor";
import infoCard from "./info-card/index.vue"
import { tableInfo } from "./info-table";
import infoTable from "./info-table/index.vue"
import { Cpu,Jvm,Sys,Mem,SysFile } from "."
import  useLoadingEmpty  from '@/hooks/common/loading';
const { loading, startLoading, endLoading } = useLoadingEmpty();
const cpu = ref<Cpu>()
const cpuDetail = ref<string>()
const jvm = ref<Jvm>()
const jvmDetail = ref<string>()
const sys = ref<Sys>()
const mem = ref<Mem>()
const sysFileTotal = ref<SysFile>();
const memDetail = ref<string>()
const sysFileDetail = ref<string>()
const cpuTable: tableInfo[] = []
const jvmTable: tableInfo[] = []
const sysTable: tableInfo[] = []
async function init() {
  startLoading();
  const { data } = await fetchMonitorInfo();
  cpu.value = data.cpu
  jvm.value = data.jvm
  sys.value = data.sys
  mem.value = data.mem
  sysFileTotal.value = data.sysFileTotal
  pushValue()
  endLoading();
}

function pushValue() {
  // cpu
  cpuTable.push(...[
    { label: "CPU名称", value: cpu.value?.cpuName! },
    { label: "CPU数量", value: cpu.value?.physicalPackageCount + "颗物理CPU" },
    { label: "CPU物理核心数", value: cpu.value?.physicalProcessorCount + "个物理核心" },
    { label: "CPU逻辑核心数", value: cpu.value?.logicalProcessorCount + "个逻辑核心" },
  ])
  cpuDetail.value = "CPU系统使用率："+cpu.value?.sys+"%<br/>"
                  + "CPU用户使用率："+cpu.value?.used+"%<br/>"
                  + "CPU当前总使用率："+(cpu.value?.sys! + cpu.value?.used!).toFixed(2)+"%<br/>"
                  + "CPU当前等待率："+cpu.value?.wait+"%<br/>"
                  + "CPU当前空闲率："+cpu.value?.free+"%";

  //jvm
  jvmTable.push(...[
    { label: "JVM名称", value: jvm.value?.name! },
    { label: "JVM版本", value: jvm.value?.version},
    { label: "JVM启动时间", value: jvm.value?.startTime},
    { label: "JVM运行时长", value: jvm.value?.runTime},
    { label: "Java版本", value: jvm.value?.javaVersion },
    { label: "Java安装路径", value: jvm.value?.home},
  ])
  jvmDetail.value = "JVM总分配内存："+jvm.value?.total+" MB<br/>"
                  + "JVM已用内存："+jvm.value?.used+" MB<br/>"
                  + "JVM剩余内存："+jvm.value?.free+" MB<br/>"
                  + "JVM内存使用率："+jvm.value?.usage+"%";

  // sys
  sysTable.push(...[
    { label: "服务器名称", value: sys.value?.computerName },
    { label: "服务器操作系统", value: sys.value?.osName},
    { label: "服务器IP", value: sys.value?.computerIp },
    { label: "服务器架构", value: sys.value?.osArch},
  ])

  //mem 内存信息
  memDetail.value = "内存总量："+mem.value?.total+" GB<br/>"
                  + "内存已用："+mem.value?.used+" GB<br/>"
                  + "内存剩余："+mem.value?.free+" GB<br/>"
                  + "内存使用率："+mem.value?.usage+"%";

  // sysFiles 存储信息
  sysFileDetail.value = "存储总量："+sysFileTotal.value?.total+"<br/>"
                  + "存储已用："+sysFileTotal.value?.used+"<br/>"
                  + "存储剩余："+sysFileTotal.value?.free+"<br/>"
                  + "存储使用率："+sysFileTotal.value?.usage+"%";
}


onBeforeMount(() => {
  init()
})

</script>
